@import 'theme';
@import 'functions';
@import 'mixins';
@import '~bootstrap/scss/pagination';

//cx-order-history color variables
$cx-order-history-table-border-top-color: 'light' !default;
$cx-order-history-table-border-bottom-color: 'light' !default;
$cx-order-history-tr-border-top-color-sm: 'light' !default;
$cx-order-history-label-color: 'secondary' !default;
$cx-order-history-value-color: 'text' !default;
$cx-order-history-header-color: 'text' !default;

//cx-order-history variables
$cx-order-history-max-width-sm: 100% !default;
$cx-order-history-padding-sm: 0 !default;

$cx-order-history-table-padding: 1.5rem 0 1.125rem 0 !default;
$cx-order-history-table-margin-bottom: 0 !default;
$cx-order-history-table-border-top: 1px solid !default;
$cx-order-history-table-border-bottom: 1px solid !default;

$cx-order-history-tr-width: 100% !default;
$cx-order-history-tr-border-top-sm: 1px solid !default;
$cx-order-history-tr-first-child-padding-top-sm: 1.25rem !default;
$cx-order-history-tr-first-child-border-top-sm: 0 none !default;

$cx-order-history-th-padding: 1.5rem 0 1.125rem 0 !default;

$cx-order-history-td-width: 25% !default;
$cx-order-history-td-width-sm: 100% !default;
$cx-order-history-td-padding: 1.625rem 0 !default;
$cx-order-history-td-border-sm: 0 none !default;
$cx-order-history-td-padding-sm: 0 1.25rem !default;
$cx-order-history-td-first-child-padding-top-sm: 1.25rem !default;
$cx-order-history-td-last-child-padding-bottom-sm: 1.25rem !default;

$cx-order-history-header-padding: 40px 0 0 0 !default;
$cx-order-history-header-padding-sm: 40px 20px 0 20px !default;

$cx-order-history-label-min-width-sm: 110px !default;

$cx-order-history-form-group-margin-bottom: 0 !default;
$cx-order-history-form-group-col-sm-12-padding: 0 !default;
$cx-order-history-form-group-col-sm-12-padding-sm: 20px !default;
$cx-order-history-form-group-padding-left: 0 !default;
$cx-order-history-form-group-padding-right: 0 !default;
$cx-order-history-form-group-padding-sm: 1.25rem !default;

$cx-order-history-form-pagination-top-padding: 1rem 0 !default;
$cx-order-history-form-pagination-top-padding-top-sm: 0 !default;
$cx-order-history-form-pagination-top-margin: 0 !default;
$cx-order-history-form-pagination-bottom-padding: 2rem 0 1rem 0 !default;
$cx-order-history-form-pagination-bottom-padding-top-sm: 0 !default;
$cx-order-history-form-pagination-bottom-margin: 0 !default;

$cx-order-history-pagination-margin-sm: 0 auto !default;

$cx-order-history-no-order-min-height: 415px !default;
$cx-order-history-no-order-min-height-sm: 474px !default;
$cx-order-history-no-order-col-sm-12-padding: 0 !default;
$cx-order-history-no-order-col-sm-12-padding-sm: 1.25rem !default;
$cx-order-history-no-order-btn-margin: 1.25rem 0 !default;
$cx-order-history-no-order-padding-left-sm: 1.25rem !default;
$cx-order-history-no-order-padding-right-sm: 1.25rem !default;

.cx-order-history {
  .table {
    padding: $cx-order-history-table-padding;
    margin-bottom: $cx-order-history-table-margin-bottom;

    border-bottom: $cx-order-history-table-border-bottom;
    @include var-color(
      'border-bottom-color',
      $cx-order-history-table-border-bottom-color
    );

    border-top: $cx-order-history-table-border-top;
    @include var-color(
      'border-top-color',
      $cx-order-history-table-border-top-color
    );
  }

  tr {
    width: $cx-order-history-tr-width;

    @include media-breakpoint-down(sm) {
      border-top: $cx-order-history-tr-border-top-sm;
      @include var-color(
        'border-top-color',
        $cx-order-history-tr-border-top-color-sm
      );
      &:first-child {
        border-top: $cx-order-history-tr-first-child-border-top-sm;
        padding-top: $cx-order-history-tr-first-child-padding-top-sm;
      }
    }
  }

  th {
    padding: $cx-order-history-th-padding;
    text-align: left;

    &:last-child {
      text-align: right;
    }
  }

  td {
    width: $cx-order-history-td-width;
    padding: $cx-order-history-td-padding;

    @include media-breakpoint-up(md) {
      text-align: left;

      &:last-child {
        text-align: right;
      }
    }

    @include media-breakpoint-down(sm) {
      width: $cx-order-history-td-width-sm;
      display: flex;
      border: $cx-order-history-td-border-sm;
      padding: $cx-order-history-td-padding-sm;

      &:first-child {
        padding-top: $cx-order-history-td-first-child-padding-top-sm;
      }

      &:last-child {
        padding-bottom: $cx-order-history-td-last-child-padding-bottom-sm;
      }
    }
  }

  &__header {
    padding: $cx-order-history-header-padding;
    @include var-color('color', $cx-order-history-header-color);

    @include media-breakpoint-down(sm) {
      padding: $cx-order-history-header-padding-sm;
    }
  }

  &__thead {
    &--mobile {
      @include media-breakpoint-down(sm) {
        display: none;
      }
    }
  }

  &__code {
    text-decoration: underline;
  }

  &__placed {
    text-align: center;

    @include media-breakpoint-down(sm) {
      text-align: left;
    }
  }

  &__status {
    text-align: center;

    @include media-breakpoint-down(sm) {
      text-align: left;
    }
  }

  &__total {
    text-align: right;

    @include media-breakpoint-down(sm) {
      text-align: left;
    }
  }

  &__label {
    text-transform: uppercase;
    @include var-color('color', $cx-order-history-label-color);

    @include media-breakpoint-down(sm) {
      @include type('8');
      min-width: $cx-order-history-label-min-width-sm;
    }
  }

  &__value {
    @include var-color('color', $cx-order-history-value-color);

    @include media-breakpoint-down(sm) {
      @include type('5');
      font-weight: $font-weight-normal;
    }
  }

  &__form-group {
    padding-left: $cx-order-history-form-group-padding-left;
    padding-right: $cx-order-history-form-group-padding-right;
    margin-bottom: $cx-order-history-form-group-margin-bottom;

    @include media-breakpoint-down(sm) {
      padding-left: $cx-order-history-form-group-padding-sm;
      padding-right: $cx-order-history-form-group-padding-sm;
      padding-top: $cx-order-history-form-group-padding-sm;
      padding-bottom: $cx-order-history-form-group-padding-sm;
    }
  }

  &__form-pagination {
    &--top {
      display: flex;
      justify-content: space-between;
      padding: $cx-order-history-form-pagination-top-padding;
      margin: $cx-order-history-form-pagination-top-margin;

      @include media-breakpoint-down(sm) {
        flex-direction: column;
        padding-top: $cx-order-history-form-pagination-top-padding-top-sm;
      }
    }

    &--bottom {
      display: flex;
      justify-content: space-between;
      padding: $cx-order-history-form-pagination-bottom-padding;
      margin: $cx-order-history-form-pagination-bottom-margin;

      @include media-breakpoint-down(sm) {
        flex-direction: column;
        padding-top: $cx-order-history-form-pagination-bottom-padding-top-sm;
      }
    }
  }

  &__pagination {
    @include media-breakpoint-down(sm) {
      margin: $cx-order-history-pagination-margin-sm;
    }
  }

  &__no-order {
    @include type('5');
    font-weight: $font-weight-normal;
    min-height: $cx-order-history-no-order-min-height;

    @include media-breakpoint-down(sm) {
      min-height: $cx-order-history-no-order-min-height-sm;
      padding-left: $cx-order-history-no-order-padding-left-sm;
      padding-right: $cx-order-history-no-order-padding-right-sm;
    }

    .btn {
      margin: $cx-order-history-no-order-btn-margin;
    }
  }

  @include media-breakpoint-down(sm) {
    max-width: $cx-order-history-max-width-sm;
    padding: $cx-order-history-padding-sm;
  }
}
